<!--table组件-->
<!--20220224 取消:height="height"  单独设置maxheight可以达到高度随内容高度，自适应高度的效果-->
<!-- 20240321 :default-sort="{prop:'name',order:'ascending'}"  外部调用此组件时需要在table-column中添加prop属性 否则不生效 -->
<template>
  <div class="table">
    <el-table v-if="allowSelectChild"
      
      :max-height="maxHeight"
      empty-text="暂无数据"
      :data="rolesList"
      style="width: 100%;"
      :style="{'margin-top':marginTop+'px'}"
      :header-cell-style="{background:'#304156',color:'#fff',height:'40px',padding:0,fontSize:'14px!important'}"
      @select="checkBoxs"
      @select-all="checkboxsAll"
      @selection-change="handleSelectionChange"
      row-key="id"
      :tree-props="{children: 'children'}"
      default-expand-all
    >
      >
      <el-table-column type="selection" width="50" v-if="allCheckBox" :selectable="handleSelection"></el-table-column>
      <slot></slot>
    </el-table>

    <el-table v-else
      :span-method="objectSpanMethod"
      
      empty-text="暂无数据"
      :data="rolesList"
      style="width: 100%;"
      :style="{'margin-top':marginTop+'px'}"
      border
      :header-cell-style="{background:'#eef1f6',color:'#606266'}"
      @select="checkBoxs"
      @select-all="checkboxsAll"
      @selection-change="handleSelectionChange"
      :tree-props="{children: 'children'}"
      default-expand-all
    >
      >
      <el-table-column type="selection" width="50" v-if="allCheckBox"></el-table-column>
      <slot></slot>
    </el-table>



  </div>
</template>
<script>
export default {
  name: "Table",
  data() {
    return {};
  },
  created() {},
  methods: {
    checkBoxs(selection, row) {
      this.$emit("checkBoxs", selection, row);
      // console.log("select",selection);
      // console.log("row",row);
    },
    checkboxsAll(selection) {
      this.$emit("checkboxsAll", selection);
      // console.log("select",selection);
    },
    handleSelectionChange(handleSelectionChange) {
      this.$emit("handleSelectionChange", handleSelectionChange);
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }){
      this.$emit("objectSpanMethod", {row, column, rowIndex, columnIndex});
    },
    //设置某行不可选
    handleSelection(row, index) {
      if (row.hasChildren == true) {
        return false;
      } else {
        return true;
      }
    }
  },
  // props: ["rolesList", "allCheckBox"],
  props: {
    allowSelectChild:{
      type:Boolean,
      default:true,
    },
    rolesList: {
      type: Array
    },
    allCheckBox: {
      type: Boolean
    },
    marginTop: {
      type: Number,
      default: 30
    },
    // height: {
    //   type: [Number,String],
    //   default: 650
    // },
    maxHeight: {
      type: [Number,String],
      default: 650
    },
  }
};
</script>
<style lang="scss" scoped>
// @import '@/styles/index.scss';
// .el-pagination {
//   text-align: center;
// }
.auditList .el-table {
  margin-top: 0 !important;
}
</style>
